<!-- 
    ** distance number类型 区别是否有tabBar，按钮距离底部的距离不同 默认tabBar是150+paddingBottom 没有是100
    ** scrollTop number 滚动距离
 -->
<template>
    <view>
        <view class="top" 
            :style="{ bottom: (distance ? distance + 'rpx' : 200 + safeAreaBottom + 'rpx') }" 
            v-show="topShow"
            @click="goTop()"
        >
            <image src="@/static/images/goTop.svg" mode=""></image>
        </view>
    </view>
</template>
 
<script>
export default {
	name: 'viewTop',
	data() {
		return {
			topShow: false,
			windowHeight: 0,
			// tabBar高度
			safeAreaBottom: 0
		};
	},
	props: {
		distance: {
			type: Number,
			default: 0
		},
		scrollTop: {
			type: Number,
			default: 0
		},
	},
	// #ifdef MP-WEIXIN 
	created() {
		uni.getSystemInfo({
			success: (res) => {
				this.windowHeight = res.windowHeight;
				this.safeAreaBottom = res.screenHeight - res.safeArea.bottom;
			}
		});
	},
	// #endif
	watch: {
		scrollTop(val, oldVal) {
			if (val > oldVal || val < 400) {
				this.topShow = val >= this.windowHeight || val >= 400;
			}
		}
	},
	methods: {
		goTop() {
			uni.pageScrollTo({
				scrollTop: 0
			});
			// eslint-disable-next-line
			this.$emit('goTop');
			this.topShow = false;
		},
	}
};
</script>
 
<style lang="scss">
.top {
    height: 80rpx;
    width: 80rpx;
    text-align: center;
    line-height: 80rpx;
    position: fixed;
    z-index: 10;
    right: 20rpx;
    // bottom: 140rpx;
    animation: heart 0.3s;

    image {
        height: 40px;
        width: 40px;
    }

    @keyframes heart {
        0% {
            right: -20rpx;
        }

        100% {
            right: 20rpx;
        }
    }
}
</style>